<template>
  <div>
    <div class="row-header">
      <el-form :inline="true" label-width="50px">
        <el-form-item label=" ">
          <el-date-picker class="select" v-model="insertTime" type="daterange" align="right" unlink-panels
                          range-separator="至" start-placeholder="注册开始日期" end-placeholder="注册结束日期" size="small"
                          value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label=" ">
          <el-select size="small" v-model="dictExamineStatusName" placeholder="请选择处理状态" clearable>
            <el-option v-for="state in dictExamineStatusSelect" :key="state.value" :label="state.label"
                       :value="state.value"></el-option>
          </el-select>
        </el-form-item>

<!--        <el-form-item label=" ">
          <el-select size="small" v-model="dictExamineStatusName" placeholder="请输入C端用户名" clearable>
            <el-option v-for="state in dictExamineStatusSelect" :key="state.value" :label="state.label"
                       :value="state.value"></el-option>
          </el-select>
        </el-form-item>-->

      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-search" @click="currentPage = 1 ; initData()">查询</el-button>
        <el-button type="shenda" size="small" icon="el-icon-download" @click="exportTelExcel">导出数据</el-button>
        <el-button type="shenda" size="mini" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark"
                class="row-main-table" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="loginName" label="登录账号" align="center"></el-table-column>
        <el-table-column prop="nickName" label="微信昵称" align="center"></el-table-column>
<!--        <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>-->
<!--        <el-table-column prop="customerPayFee" label="总花费金额" align="center"></el-table-column>-->
        <el-table-column prop="cardCount" label="拥有卡数" align="center"></el-table-column>
        <el-table-column prop="certificatesNum" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="certificatesOne" label="证件正面" align="center">
          <template slot-scope="scope" v-if="scope.row.certificatesOne !== null">
            <el-image v-if="scope.row.certificatesOne!=null" style="width: 100px; height: 100px"
                      :src="scope.row.certificatesOne"
                      :preview-src-list="handelImage(scope.row.certificatesOne)"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="certificatesTwo" label="证件反面" align="center">
          <template class="pic" slot-scope="scope" v-if="scope.row.certificatesTwo !== null">
            <el-image v-if="scope.row.certificatesTwo!=null" style="width: 100px; height: 100px"
                      :src="scope.row.certificatesTwo"
                      :preview-src-list="handelImage(scope.row.certificatesTwo)"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="certificatesThree" label="手持证件" align="center">
          <template class="pic" slot-scope="scope" v-if="scope.row.certificatesThree !== null">
            <el-image v-if="scope.row.certificatesThree!=null" style="width: 100px; height: 100px"
                      :src="scope.row.certificatesThree"
                      :preview-src-list="handelImage(scope.row.certificatesThree)"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="dictExamineStatusName" label="审核结果" align="center"></el-table-column>
        <el-table-column prop="insertTimeTime" label="注册时间" align="center"></el-table-column>
        <el-table-column prop="name" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-button class="operation" @click="viewCustomerCard(scope.row)">查看下属卡</el-button>
                <el-button class="operation" @click="delCustomer(scope.row)">删除</el-button>
<!--                <el-button class="operation" @click="showHisCustomerOrder(scope.row)">查看历史订单</el-button>-->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="row-main-pager" :page-sizes="[10,20,50,100]"
                     :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     background :total="total"></el-pagination>
    </div>
  </div>

</template>

<script>
import {userDataCustomerList, customerPhoneExport, selectAgentProfit,delCustomer} from '@/api/getData'

export default {
  name: 'RealName',
  data() {
    return {
      maxPage: 1,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      total: 0,
      nickName: '',
      customerName: '',
      certificatesNum: '',
      loginName: '',
      dictExamineStatus: '',
      certificatesOne: '',
      certificatesTwo: '',
      certificatesThree: '',
      dictExamineStatusName: '',
      insertTime: '',
      dealTime: '',
      examineUser: '',
      imageUrl: '',
      dictExamineStatusSelect: [
        {
          value: '',
          label: '请选择实名状态'
        },
        {
          value: 'USER_NONREAL',
          label: '未实名'
        },
        {
          value: 'USER_WAIT',
          label: '待审核'
        },
        {
          value: 'USER_PASS',
          label: '已实名'
        },
        {
          value: 'USER_REFUSE',
          label: '拒绝'
        }
      ],
      value: false,
      id: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    //导出手机号
    exportTelExcel(){
      let start = '';
      let end = '';
      if(this.insertTime){
        start = this.insertTime[0];
        end = this.insertTime[1];
      }
      customerPhoneExport({
        insertStartDate: start,
        insertEndDate:end,
        dictExamineStatus: this.dictExamineStatusName,
      })
      this.$confirm('正在查询中，是否立即前往任务中心查看结果?', '提示', {
        confirmButtonText: '前往任务中心',
        cancelButtonText: '留在当前页',
        type: 'warning'
      }).then(() => {
        this.$router.push({
          path: '/mission/mission'
        })
      }).catch(() => {

      });
    },
    imgStyle({row, column, rowIndex, columnIndex}) {
      if ((rowIndex > 0 || row.insertUserName2) && columnIndex === 12) {
        return 'pic'
      }
    },
    async initData() {
      let startTime = null;
      let endTime = null;
      if (this.insertTime !== '' && this.insertTime != null) {
        startTime = this.insertTime[0]
        endTime = this.insertTime[1]
      }
      this.tableLoading = true;
      const returnData = await userDataCustomerList({
          insertStartDate: startTime,
          insertEndDate: endTime,
          dictExamineStatus: this.dictExamineStatusName,
          page: {
            current: this.currentPage + '',
            size: this.pageSize + '',
            ascs: this.ascs,
            descs: this.descs
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        });
      this.tableData = [];
      this.total = 0;
      if (returnData._result) {
        const imageUrl = localStorage.getItem('image');
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize);// 分页的最大页数
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.remark = item.remark
          obj.nickName = item.nickName // 客户
          obj.customerName = item.customerName // 客户名称
          obj.certificatesNum = item.certificatesNum // 身份证号
          obj.loginName = item.loginName // 联系电话
          obj.certificatesOne = imageUrl + item.certificatesOne // 证件正面
          obj.certificatesTwo = imageUrl + item.certificatesTwo // 证件反面
          obj.certificatesThree = imageUrl + item.certificatesThree // 手持证件
          obj.dictExamineStatus = item.dictExamineStatus // 审核结果
          obj.dictExamineStatusName = item.dictExamineStatusName // 审核结果
          obj.insertTime = item.insertTime // 注册时间
          obj.insertTimeTime = item.insertTimeTime // 注册时间
          obj.cardCount = item.cardCount // 拥有卡数
          obj.customerPayFee = item.customerPayFee //客户总花费
          this.tableData.push(obj)
        })
        this.tableLoading = false;
        this.total = returnData.data.total;
      }
    },

    viewCustomerCard(customer) {
      this.$router.push({path: '/user/card/' + customer.id})
    },
    showHisCustomerOrder(customer) {
      this.$router.push({path: '/customer/customerOrder/' + customer.id})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.initData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.initData()
    },
    handelImage(img) {
      let b = [];
      b.push(img)
      return b
    },
    resetForm(){
      this.insertTime = '';
      this.dictExamineStatusName = '';
    },
    delCustomer(id){
      delCustomer({id})
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
.el-image /deep/ .el-image-viewer__close {
  top: 100px !important;
}

.examine /deep/ .el-dialog__body {
  text-align: center;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}

.el-popper[x-placement^=bottom] {
  margin-right: -25px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}

.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -25px;

  button {
    display: block;
  }

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
